<template>
	<view>
		<view class="content">
			<view class="box" v-for="(item,index) in dynimicList" :key="index">
				<view class="name">{{item.nick_name}}：</view>
				<view class="text">{{item.content}}</view>
				<view v-if="item.images">
					<image :src="item.images" mode="widthFix" class="img">
					</image>
				</view>
			</view>
		</view>
		<Join @popuped="open"></Join>
		<uni-popup ref="popup" type="bottom">
			<view class="popup">
				<view class="item">
					<view class="tit">昵称：</view>
					<input type="text" v-model="saveData.nick_name" placeholder="请输入昵称" class="ipt" />
				</view>
				<view class="item">
					<view class="tit">内容：</view>
					<textarea v-model="saveData.content" placeholder="" class="textarea" />
				</view>
				<view class="uploadimg" @click="uploadImage">{{imgText}}</view>
				<view type="default" class="btn" @click="submit">立马上墙</view>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import Join from '../../components/join.vue'
	export default {
		components: {
			Join
		},
		data() {
			return {
				saveData: {
					nick_name: '',
					content: '',
					images: '',
				},
				dynimicList: [],
				prvTime: parseInt(new Date().getTime() / 1000) - 20 * 60,
				prvTime: 0,
				imgText: '上传图片'
			}
		},
		onLoad() {
			this.getDynamic()
			this.start()
		},
		methods: {
			//启动程序
			start() {
				setInterval(() => {
					this.getDynamic()
					this.scrollToBottom()
				}, 5000)
				setInterval(() => {
					this.scrollToBottom()
				}, 2000)
			},
			//上传图片
			uploadImage() {
				//前端代码
				var that = this
				uni.chooseImage({
					type: 'image',
					sizeType: 'compressed',
					count: 1,
					success(res) {
						console.log(res);
						if (res.tempFilePaths.length > 0) {
							let filePath = res.tempFilePaths[0]
							uni.showLoading({
								mask: true,
								title: '上传中'
							})
							//进行上传操作
							uniCloud.uploadFile({
								filePath: filePath,
								cloudPath: new Date().getTime() + '.jpg',
								onUploadProgress: function(progressEvent) {
									console.log(progressEvent);
									var percentCompleted = Math.round(
										(progressEvent.loaded * 100) / progressEvent.total
									);
								},
								success(res) {
									that.saveData.images = res.fileID
									uni.hideLoading()
									uni.showToast({
										icon: 'success',
										title: '上传成功',
										duration: 700
									})
									that.imgText = '上传成功'

								},
								fail() {
									uni.hideLoading()
									uni.showToast({
										icon: 'success',
										title: '上传失败',
										duration: 700
									})
								},
								complete() {}
							});

						}
					}
				});
			},
			//滚动到底
			scrollToBottom() {
				this.$nextTick(function() {
					uni.pageScrollTo({
						scrollTop: 9999999,
						duration: 500
					})
				});
			},
			//获取数据
			getDynamic() {
				const db = uniCloud.database();
				var jql = 'time>' + this.prvTime
				db.collection('im-going-up-the-wall-dynamic').where(jql).get().then(res => {
					console.log(res.result.data)
					this.dynimicList.push(...res.result.data)
					this.prvTime = this.dynimicList[this.dynimicList.length - 1] ? this.dynimicList[this
						.dynimicList.length - 1].time : this.prvTime
					console.log(this.prvTime, this.dynimicList)
				})
			},
			//点击上墙
			submit() {
				if (this.saveData.nick_name && this.saveData.content) {
					uniCloud.callFunction({
						name: 'submitDynamic',
						data: this.saveData
					}).then(res => {
						console.log(res)
						if (res.result.code == 1) {
							uni.showToast({
								icon: 'success',
								title: res.result.msg
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: res.result.msg
							})
						}

						this.$refs.popup.close()
						this.saveData.content = ''
						this.saveData.images = ''
						this.imgText = '上传图片'
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: '请补全信息',
						duration: 700
					})
				}

			},
			//打开弹出层
			open() {
				this.$refs.popup.open('center')
			},

		}
	}
</script>

<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
	}

	.box {
		width: 80vw;
		border-radius: 30rpx;
		border: 2rps solid #000;
		box-shadow: 5rpx 5rpx 20rpx #ccc;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 50rpx;

		.name {
			font-size: 36rpx;
			font-weight: 700;
			color: #9cdcfe;
		}

		.text {
			font-size: 45rpx;
			letter-spacing: 6rpx;
			text-indent: 2em;
			padding: 20rpx 0;
		}

		.img {
			width: 75vw;
		}
	}

	.popup {
		width: 80vw;
		// height: 70vh;
		padding: 60rpx 0;
		background-color: #fff;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.item {
			display: flex;
			justify-content: space-around;
			align-items: center;
			color: #666666;
			margin-bottom: 30rpx;

			.tit {
				font-size: 35rpx;
				font-weight: 700;
			}

			.ipt {
				border-bottom: 2rpx solid #ccc;
				font-size: 40rpx;
				width: 50vw;
				padding: 20rpx;
				height: 100rpx;
				box-sizing: border-box;

			}

			.textarea {
				// background-color: pink;
				border: 2rpx solid #ccc;
				border-radius: 20rpx;
				width: 50vw;
				padding: 20rpx;
				box-sizing: border-box;
				font-size: 38rpx;
			}


		}

		.uploadimg {
			padding: 50rpx;
			border: 2rpx solid #ccc;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}

		.btn {
			width: 35vw;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 38rpx;
			font-weight: 700;
			background-color: skyblue;
			border-radius: 30rpx;
			color: #fff;
		}
	}
</style>